<template>
<div class="mine">
    <div class="title">
        <div class="imgbox">
        <img src="../../assets/wd-02.jpg" alt="">
        </div>
        <div class="sz">
           <h3>7a9aa5a077a</h3>
           <span>136****9070</span>
        </div>
        <div class="zh">
           <h4>账户设置</h4>
         </div>
    </div>
     <div class="lbt"> 
        <img src="../../assets/wd-01.jpg" alt="">
     </div>
     <div class="money">
        <div class="hb">
            <img src="../../assets/wd-03.jpg" alt="">
            <span>红包</span>
            <p>7张今日到期</p>
        </div>
         <div class="ye"> 
            <img src="../../assets/wd-03.jpg" alt="">
            <span>余额</span>
            <p>0</p>
        </div>
     </div>
     <div class="wdkf">
        <h2>常用工具</h2>
        <ul>
            <li @click="currentIndex=index" :class="{active:currentIndex==index}" v-for="(item,index) in arr" :key="index">{{item}}</li>
        </ul>
     </div>
     <div class="yqhy">
        <div class="left" v-for="(item,index) in arr1" :key="index">
            <h3>{{item.text}}</h3>
            <span>{{item.price}}</span><br>
            <img src="../../assets/wd-03.jpg" alt=""><br>
            <span class="quyq">{{item.text2}}</span>
            <span>{{item.text3}}</span>
        </div>
     </div>
    
</div>
</template>

<script>
export default {
   data(){
    return{
        currentIndex:0,
        arr:['我的地址','我的客服','店铺关注','评价有礼'],
        arr1:[
            {text:"邀好友赚现金",price:'最高得15元',pic:"../../assets/wd-03.jpg",text2:"去邀请",text3:'查佣金'},
            {text:"饿了么服务号",price:'关注后接受系统通知',pic:"../../assets/wd-03.jpg",text2:"立即关注"}
        ]
    }
   },
//    methods:{
//     handleClick(){
//         this.currentIndex=index;
//     }
//    }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
.title{
    display: flex;
}
.title .imgbox img{
    // width: 30px;
    padding-top: 10px;
}
.sz {
    margin-left: 10px;
    margin-top: 20px;
}
.zh {
    margin-left: 50px;
    text-align: center;

}
h4 {
   border: 1px solid black;
    border-radius: 10px;
    margin-top: 40px;
    // padding-top: 30px;
}
.lbt{
    width: 100%;
    // background: orange;
    margin-top: 20px;
}
.lbt img{
    
    width: 100%;
}
.money{
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    text-align: center;
}
.money .ye p {
    text-align: center;
}
.money  .hb span{
    display: inline-block;
  margin-left: 10px;
//   padding-bottom: 10px;
}
.money  .ye span{
  margin-left: 10px;
}
.wdkf{
    margin-top: 20px;
}
ul {
    display: flex;
    justify-content: space-around;
    margin-left: 10px;
}
ul li{
 margin-left: 1opx;
}
.yqhy{
    display: flex;

}
.yqhy{
    margin-top: 20px;
    justify-content: space-around;
}
.yqhy img{
  margin-left: 30px;
}
.yqhy .left{
//   margin-left: 50px;
}
.yqhy .left .quyq{
  margin-right: 10px;
}
.active{
    background: rgb(91, 210, 139);
    color:red;
}
</style>